<template>
  <div class="notice-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input 
          v-model="filter.id" 
          placeholder="编号"
          style="width: 120px"
          class="filter-item"
          clearable 
        />
        <el-input 
          v-model="filter.title" 
          placeholder="主题"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
          clearable 
        />
        <el-select 
          v-model="filter.status" 
          placeholder="状态"
          style="width: 120px; margin-left: 10px"
          clearable 
        >
          <el-option label="全部" value="" />
          <el-option label="通过" value="通过" />
          <el-option label="拒绝" value="拒绝" />
          <el-option label="待审核" value="待审核" />
        </el-select>
        <el-button type="primary" style="margin-left: 10px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
      </div>
 
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button size="small" :icon="CirclePlus" @click="handleAdd">新增</el-button>
        <el-button 
          size="small" 
          :icon="Delete" 
          style="margin-left: 10px"
          :disabled="selection.length  === 0"
          @click="handleDelete"
        >
          删除 
        </el-button>
      </div>
 
      <!-- 数据表格 -->
      <el-table 
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
        class="notice-table"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="45" align="center"/>
        <el-table-column prop="id" label="编号" width="80"/>
        <el-table-column prop="title" label="主题" width="150"/>
        <el-table-column prop="date" label="发帖时间" width="120"/>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)"  size="small">{{ scope.row.status  }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button 
              size="small" 
              :icon="Edit"
              @click="handleEdit(scope.row)" 
            >
              修改 
            </el-button>
          </template>
        </el-table-column>
      </el-table>
 
      <!-- 分页信息 -->
      <div class="pagination-info">
        第1到{{ filteredData.length  }}条，共{{ filteredData.length  }}条记录。
      </div>
    </el-card>
 
    <!-- 新增/编辑对话框 -->
    <el-dialog 
      :title="dialogTitle" 
      v-model="dialogVisible" 
      width="50%"
      @closed="handleDialogClosed"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="编号" prop="id" v-if="isEdit">
          <el-input v-model="form.id"  disabled></el-input>
        </el-form-item>
        <el-form-item label="主题" prop="title">
          <el-input v-model="form.title"  placeholder="请输入通知主题"></el-input>
        </el-form-item>
        <el-form-item label="发帖时间" prop="date">
          <el-date-picker 
            v-model="form.date" 
            type="datetime"
            placeholder="选择发帖时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status"  placeholder="请选择状态" style="width: 100%">
            <el-option label="通过" value="通过"></el-option>
            <el-option label="拒绝" value="拒绝"></el-option>
            <el-option label="待审核" value="待审核"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed } from 'vue'
import { CirclePlus, Delete, Edit } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
 
// 过滤条件 
const filter = reactive({
  id: '',
  title: '',
  status: ''
})
 
// 表格数据 
const tableData = ref([
  {
    id: 7,
    title: '通知',
    date: '2020-02-09',
    status: '通过'
  },
  {
    id: 8,
    title: '紧急通知',
    date: '2020-05-12',
    status: '通过'
  },
  {
    id: 9,
    title: '系统维护通知',
    date: '2020-06-15',
    status: '待审核'
  },
  {
    id: 10,
    title: '会议取消通知',
    date: '2020-07-20',
    status: '拒绝'
  }
])
 
// 选中行 
const selection = ref([])
 
// 对话框状态 
const dialogVisible = ref(false)
const isEdit = ref(false)
const dialogTitle = ref('')
 
// 表单数据和引用 
const form = reactive({
  id: '',
  title: '',
  date: '',
  status: '待审核'
})
 
const formRef = ref(null)
 
// 表单校验规则 
const rules = reactive({
  title: [
    { required: true, message: '请输入通知主题', trigger: 'blur' },
    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
  ],
  date: [
    { required: true, message: '请选择发帖时间', trigger: 'change' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ]
})
 
// 过滤后的数据 
const filteredData = computed(() => {
  return tableData.value.filter(item  => {
    return (
      (filter.id  === '' || item.id.toString().includes(filter.id))  &&
      (filter.title  === '' || item.title.includes(filter.title))  &&
      (filter.status  === '' || item.status  === filter.status) 
    )
  })
})
 
// 获取状态标签类型 
const getStatusTagType = (status) => {
  switch (status) {
    case '通过': return 'success'
    case '拒绝': return 'danger'
    case '待审核': return 'warning'
    default: return 'info'
  }
}
 
// 处理选中行变化 
const handleSelectionChange = (val) => {
  selection.value  = val 
}
 
// 搜索 
const handleSearch = () => {
  ElMessage.success(' 搜索完成')
}
 
// 重置搜索 
const resetSearch = () => {
  filter.id  = ''
  filter.title  = ''
  filter.status  = ''
}
 
// 新增通知 
const handleAdd = () => {
  dialogTitle.value  = '新增通知'
  isEdit.value  = false 
  dialogVisible.value  = true 
}
 
// 删除选中项 
const handleDelete = () => {
  ElMessageBox.confirm(' 确定要删除选中的通知吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const ids = selection.value.map(item  => item.id) 
    tableData.value  = tableData.value.filter(item  => !ids.includes(item.id)) 
    ElMessage.success(' 删除成功')
    selection.value  = []
  }).catch(() => {
    ElMessage.info(' 已取消删除')
  })
}
 
// 编辑通知 
const handleEdit = (row) => {
  dialogTitle.value  = '编辑通知'
  isEdit.value  = true 
  Object.assign(form,  JSON.parse(JSON.stringify(row))) 
  dialogVisible.value  = true 
}
 
// 对话框关闭 
const handleDialogClosed = () => {
  if (formRef.value)  {
    formRef.value.resetFields() 
  }
  Object.assign(form,  {
    id: '',
    title: '',
    date: '',
    status: '待审核'
  })
}
 
// 提交表单 
const submitForm = async () => {
  try {
    await formRef.value.validate() 
    
    if (isEdit.value)  {
      // 编辑模式 - 更新数据 
      const index = tableData.value.findIndex(item  => item.id  === form.id) 
      if (index !== -1) {
        tableData.value.splice(index,  1, {...form})
        ElMessage.success(' 修改成功')
      }
    } else {
      // 新增模式 - 添加数据 
      const newId = tableData.value.length  > 0 
        ? Math.max(...tableData.value.map(item  => item.id))  + 1 
        : 1 
      tableData.value.unshift({ 
        ...form,
        id: newId 
      })
      ElMessage.success(' 新增成功')
    }
    dialogVisible.value  = false 
  } catch (error) {
    console.error(' 表单验证失败:', error)
  }
}
</script>
 
<style scoped>
.notice-container {
  padding: 20px;
}
 
.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
 
.filter-item {
  margin-left: 10px;
}
 
.action-buttons {
  margin-bottom: 15px;
}
 
.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}
 
.pagination-info {
  margin-top: 15px;
  color: #909399;
  font-size: 13px;
  text-align: center;
}
 
/* 复选框样式调整 */
.el-table__header .el-checkbox__inner {
  border-radius: 2px;
}
 
/* 操作按钮间距调整 */
.el-table .el-button {
  margin: 2px;
  padding: 7px 10px;
}
 
/* 对话框表单样式 */
.el-form-item {
  margin-bottom: 20px;
}
</style>